<!--
 * @Author: zhw 443844039@qq.com
 * @Date: 2025-08-02 20:16:18
 * @LastEditors: zhw 443844039@qq.com
 * @LastEditTime: 2025-08-23 22:23:19
 * @Description: 教学进度
-->
<template>
  <div>
    <div class="header">
      <h3>教学进度</h3>
    </div>
    <div id="trChart" ref="trChart" class="echarts-box"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { courseProgressCountApi } from '@/api/workbench'

export default {
  data() {
    return {
      
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.trChart)
      courseProgressCountApi().then(res => {
        const colors = ['#6395FA', '#74CBED', '#FF9EC6']
         const dataCount = res.data.map((item, index) => ({
          value: item.count,
          name: item.courseStatusName,
          itemStyle: { color: colors[index] }
        }))
        let option = {
          tooltip: {
            trigger: 'item',
          },
          legend: {
            y:'bottom',
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: dataCount,
            }
          ]
        };
        chart.setOption(option)
      })
    }
  }
}
</script>

<style scoped>
.header {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}
.header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}
.echarts-box{
  width: 100%;
  height: 400px;
}
</style>